var app = new Vue({
    el: '#app',
    data: {
        proudctList: [
            {
                catName: '电子产品',
                list: [
                    {
                        id: 1,
                        name: 'iPhone12',
                        price: 9999,
                        count: 5
                    }, {
                        id: 2,
                        name: 'iPad',
                        price: 7588,
                        count: 3
                    }, {
                        id: 3,
                        name: 'MackBook Pro',
                        price: 21488,
                        count: 1
                    }
                ]
            },
            {
                catName: '食品',
                list: [
                    {
                        id: 1,
                        name: '西瓜',
                        price: '5000',
                        count: 1
                    }, {
                        id: 2,
                        name: '苹果',
                        price: '12',
                        count: 12
                    }, {
                        id: 1,
                        name: '黄桃',
                        price: '8888',
                        count: 88
                    },
                ]
            }
        ],
        checkbox: [],
        checkAll: false,
    },
    computed: {
        totalPrice: function () {
            var total = 0;
            for (var i = 0; i < this.checkbox.length; i++) {
                var item = this.checkbox[i];
                total += item.price * item.count;
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
        }
    },
    methods: {
        handleReduce: function (indexOfFirst, index) {
            if (this.proudctList[indexOfFirst].list[index].count === 1) return;//如果商品小于1，则停止减少，保证最少有一个
            console.log(this.proudctList[indexOfFirst].list[index].count);
            this.proudctList[indexOfFirst].list[index].count--;
        },
        handleAdd: function (indexOfFirst, index) {
            this.proudctList[indexOfFirst].list[index].count++;
        },
        handleRemove: function (indexOfFirst, index) {
            this.proudctList[indexOfFirst].list.splice(index, 1);
            if (this.proudctList[indexOfFirst].list.length == 0) this.proudctList.splice(indexOfFirst, 1);
        },
        changeAllChecked: function () {
            if (this.checkAll) {
                this.checkbox = [];
            } else {
                this.checkbox = [];
                for (let i = 0; i < this.proudctList.length; i++) {
                    for (let j = 0; j < this.proudctList[i].list.length; j++) {
                        this.checkbox.push(this.proudctList[i].list[j]);
                    }
                }
            }
        },
        click: function () {
            console.log(this.proudctList);
        }
    },
    watch: {
        'checkbox': {
            handler: function (val, oldVal) {
                var length = 0;
                for (var i = 0; i < this.proudctList.length; i++) {
                    length += this.proudctList[i].list.length;
                }
                if (val.length === length) {
                    this.checkAll = true;
                } else {
                    this.checkAll = false;
                }
            },
            deep: true
        }
    }
});